<template>
  <div class="canvas-container">
    <canvas ref='canvasId'/>
    <h3>跳动的小球</h3>
  </div>
</template>

<script>
export default {
  mounted(){
    this.draw()
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },
  methods:{
    draw(){
      //创建画布
      const canvasCon = document.querySelector('.canvas-container')
      const canvas = this.$refs["canvasId"]
      const canvasWidth = canvasCon.clientWidth
      const canvasHeight = canvasCon.clientWidth
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      const ctx = canvas.getContext('2d') 
      
      
      function rdm(num){
        return Math.random()*num
      }

      // // 一个小球碰撞检测

      // //保证不会出 框
      // let x = rdm(canvasWidth-50) + 25 // x 坐标 25-（canvasWidth-25）
      // let y = rdm(canvasWidth-50) + 25 // y 坐标 25-canvasHeight-25）
      // const r = rdm(20)+5  //半径 5-20 

      // // 随机颜色
      // ctx.fillStyle = '#'+ parseInt(rdm(0xffffff)).toString(16) 
      // ctx.arc(x, y, r, 0, Math.PI*2, false);
      // ctx.fill()

      // let speedX = 2
      // let speedY = 2
      // setInterval(()=>{
      //   ctx.clearRect(0,0,canvasWidth,canvasHeight)
      //   ctx.beginPath()
      //   if(x+r>=canvasWidth||x-r<=0){
      //     speedX = -speedX
      //   }
      //   x = x + speedX
      //   if(y+r>=canvasHeight||y-r<=0){
      //     speedY = -speedY
      //   }
      //   y = y + speedY
      //   ctx.arc(x, y, r, 0, Math.PI*2, false);
      //   ctx.fill()
      // },10)

      
      
      // 创建
      function Ball(){
        //基础参数
        this.x = rdm(canvasWidth-50) + 25
        this.y = rdm(canvasWidth-50) + 25
        this.r = rdm(20)+5
        this.speedX = rdm(3) + 2
        this.speedY = rdm(4) + 1
        this.color = '#'+ parseInt(rdm(0xffffff)).toString(16)
        
        //显示出来
        ctx.beginPath()
        ctx.fillStyle =  this.color
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        ctx.fill()
      }
      Ball.prototype.run = function(){
        if(this.x+this.r>=canvasWidth||this.x-this.r<=0){
          this.speedX = -this.speedX
        }
        this.x = this.x + this.speedX
        if(this.y+this.r>=canvasHeight||this.y-this.r<=0){
          this.speedY = -this.speedY
        }
        this.y = this.y + this.speedY
        
        //跑起来
        ctx.beginPath()
        ctx.fillStyle =  this.color
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false); 
        ctx.fill()
      }

      // 创建多个小球
      const ballNum = 20
      const ballArr = []
      for(var i = 0; i < ballNum; i++){
        const ball = new Ball()
        ballArr.push(ball)
      }

      clearInterval(this.timer)
      // 让小球跑起来
      this.timer = setInterval(()=>{
        ctx.clearRect(0,0,canvasWidth,canvasHeight)
        for(var i = 0; i < ballArr.length; i++){
          const ball = ballArr[i]
          ball.run()
        }
      },10)
    }
  }
}
</script>

<style lang="scss" scoped>
canvas{
  display: block;
  margin: auto;
}
</style>